<template>
  <section id="home" class="hero-section" ref="home">
    <div class="hero-content">
      <h1>Vivid<span> UI</span></h1>
      <p class="subtitle">灵动活泼的Vue组件库</p>
      <p class="description">轻量、灵活、易用，为你的应用注入活力</p>
      <div class="cta-buttons">
        <button class="primary-btn" @click="$router.push({ name: 'component-overview' })">开始使用</button>
        <button class="secondary-btn">了解更多</button>
      </div>
    </div>
    <div class="hero-demo">
      <div class="demo-box">
        <div class="demo-circle" ref="circle">
          <div class="demo-item" v-for="n in 6" :key="n">
            <div class="demo-dot"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="features" class="features-section" ref="features">
    <h2>为什么选择 VividUI?</h2>
    <p class="section-description">专为现代Web应用设计的Vue组件库</p>

    <div class="features-grid">
      <div class="feature-card" v-for="feature in features" :key="feature.title">
        <div class="feature-icon" :style="{ backgroundColor: feature.color }">
          <span>{{ feature.icon }}</span>
        </div>
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </div>
  </section>

  <Footer />


</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Footer from '@/layouts/Footer.vue'

const features = [
  {
    icon: '⚡',
    title: '快速轻量',
    description: '极小的体积，极快的加载速度，不影响应用性能',
    color: '#FFEE93'
  },
  {
    icon: '🎨',
    title: '灵动设计',
    description: '精心设计的动效和交互，让应用生动有趣',
    color: '#ADF7B6'
  },
  {
    icon: '🛠️',
    title: '易于定制',
    description: '灵活的样式变量，轻松适配你的品牌风格',
    color: '#FFC09F'
  },
  {
    icon: '📱',
    title: '响应式',
    description: '完美适配各种屏幕尺寸和设备',
    color: '#A0CED9'
  }
]


const circle = ref<HTMLDivElement>()
const circleItems = ref<HTMLDivElement[]>([])
const circleRotate = ref(0)
const velocity = ref(1)
onMounted(() => {
  circleItems.value = circle.value ? Array.from(circle.value.querySelectorAll('.demo-item')) : []
  setInterval(() => {
    if (circle.value && circleItems.value) {
      circle.value.style.transform = `rotate(${circleRotate.value}deg)`
      circleItems.value.forEach((item, index) => {
        item.style.transform = `rotate(${(circleRotate.value + index * 60) % 360}deg)`
      })
    }
    circleRotate.value += velocity.value
    if (circleRotate.value >= 360 || circleRotate.value < 0) {
      velocity.value = -velocity.value
    }
  }, 50)
})

</script>


<style scoped>
.subtitle {
  font-size: 1.25rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}


.demo-item {
  position: absolute;
  top: -20px;
  left: 50%;
  transform-origin: bottom center;
}

.demo-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
  transform: translateX(-50%);
}

.features-section {
  padding: 5rem 2rem;
  background-color: var(--bg-color);
  text-align: center;
}

.section-description {
  color: var(--text-light);
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background-color: var(--bg-color);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.primary-btn,
.secondary-btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: var(--transition);
}

.primary-btn {
  background-color: var(--primary-color);
  color: white;
}

.primary-btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.secondary-btn {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.secondary-btn:hover {
  background-color: rgba(108, 99, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.hero-section {
  display: flex;
  min-height: 90vh;
  padding: 6rem 2rem 2rem;
  background: var(--bg-color);
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}

.hero-section h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.hero-section h1 span {
  color: var(--primary-color);
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
}

.feature-card h3 {
  margin-bottom: 1rem;
}

.hero-demo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-box {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px dashed var(--border-color);
  transition: transform 0.5s linear;
}
</style>
